<template>
  <div class="indexHeader">
    <div class="headerBg"></div>
    <div class="radius"></div>
    <div class="content">
      <img src="@/assets/images/indexLogo.png" alt="">
    </div>
  </div>
</template>

<style scoped lang="less">
@import "../../../../assets/css/common.less";

.indexHeader {
  .rem(height, 856px);
  
  position: relative;
  background-color:#04d198 ;
  .headerBg {
    .rem(height, 408px);
 
    background: url('../../../../assets/images/headerBg.png');
    background-size: 100%;
  }
  .radius {
    .rem(height, 548px);
    background: url('../../../../assets/images/indexRadius.png') no-repeat;
    background-size: 100%;
    .rem(margin-top, 224px);
  } 
  .content {
    position: absolute;
    left: 50%;
    .rem(width, 408px);
    .rem(min-height, 64px);
    .rem(top, 142px);
    transform: translateX(-50%); 
    background-color: red;
  }
}
</style>
